import React from 'react'
import Swiper from 'swiper';
import 'swiper/dist/idangerous.swiper.css';
import '../../assets/css/swiper3d.css';
import './index.less';
import Axios from '../../axios'
import nh_ypt from '../../assets/img/nh_ypt.png';
import ljnw from '../../assets/img/ljnw.png';
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'
import { signBaseUrl, localBaseUrl, zhBaseUrl, znBaseUrl, zzBaseUrl, bjBaseUrl } from '../../config/Config'
import utils from '../../utils/utils'
import { switch_menuShowBool, switchIndex, switch_userInfo } from '../../redux/action/index'
import { Modal, Button } from 'antd';
const confirm = Modal.confirm;
class Home extends React.Component {
        constructor(props) {
            super(props);
            this.handleScroll = this.handleScroll.bind(this);
            this.LogOut = this.LogOut.bind(this);
            this.getList = this.getList.bind(this);
            this.state = {
                item: []
            }
        }

        getList() {
            Axios.ajax({
                url: signBaseUrl + '/SSOService.asmx/GetArticleList',
                type: 'post',
                data: {
                    isShowLoading: false,
                    params: {
                        page: 1,
                        limit: 10
                    }
                }
            }).then((res) => {
                this.setState({
                    item: res.Data.ds
                })
            }).catch((res) => {

            })
        }

        handleScroll() {
            var top = document.documentElement.scrollTop || document.body.scrollTop;
            if (top > 0) {
                this.props.menuShowBool({
                    'isShow': 'block'
                })
            } else {
                this.props.menuShowBool({
                    'isShow': 'none'
                })
            }
        }

        getScrollTop() {
            var scrollTop = 0;
            if (document.documentElement && document.documentElement.scrollTop) {
                scrollTop = document.documentElement.scrollTop;
            } else if (document.body) {
                scrollTop = document.body.scrollTop;
            }
            return scrollTop;
        }

        LogOut() {
            var that = this;
            confirm({
                title: '暖虎云平台',
                content: '您确定要退出吗？',
                okText: '确定',
                okType: 'danger',
                cancelText: '取消',
                onOk() {
                    sessionStorage.removeItem('userInfo');
                    that.props.LogOutProps({
                        isLogIn: false,
                        UserName: ''
                    })
                    const form = document.createElement('form');
                    form.id = 'form-file-download';
                    form.name = 'form-file-download';
                    // 添加到 body 中
                    document.body.appendChild(form);
                    const input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = 'SoftList';
                    input.value = JSON.stringify(that.props.userInfo.SoftList);
                    form.appendChild(input);
                    const input2 = document.createElement('input');
                    input2.type = 'hidden';
                    input2.name = 'znUrl';
                    input2.value = "http://" + window.location.host + "/#/home";
                    form.appendChild(input2);
                    // form 的提交方式
                    form.method = 'POST';
                    // form 提交路径
                    form.action = localBaseUrl + '/ClearCookie.aspx';
                    form.submit();
                    document.body.removeChild(form);
                },
                onCancel() {

                },
            });

        }
        componentDidMount() {
            window.scrollTo(0, sessionStorage.getItem("ScrollTop") || 0);
            this.props.menuShowBool({
                'isShow': 'none',
            });
            this.props.menuInit(null);
            let mySwiper = new Swiper('.swiper-container', {
                loop: true,
                slidesPerView: 3,
                centeredSlides: true,
                loopAdditionalSlides: 3,
                preventLinks: false,
                tdFlow: {
                    rotate: 0,
                    depth: 110,
                },
                onSlideClick: function(swiper) {
                    // mySwiper.swipeTo(swiper.clickedSlideIndex, 1000, false);
                }
            });
            document.getElementById("left").onclick = function() {
                mySwiper.swipePrev();
            }
            document.getElementById("right").onclick = function() {
                mySwiper.swipeNext();
            }
            window.addEventListener('scroll', this.handleScroll);
            this.getList()
        }

        componentWillUnmount() {
            window.removeEventListener('scroll', this.handleScroll);
            sessionStorage.setItem("ScrollTop", this.getScrollTop())
        }

        render() {
            return ( <
                div className = "home-wrap" >
                <
                div className = "b_g" >

                <
                /div> <
                div className = "colud" >
                <
                /div> <
                div className = "home_header" >
                <
                div className = "" > < /div> <
                div className = "top" >
                <
                div className = "logo" > < img src = { nh_ypt }
                alt = "" / > < /div> <
                ul className = "list" >
                <
                Link to = "/serviceCommunity"
                data - index = "1"
                className = "li" > 服务社区 < /Link> <
                li data - index = "2"
                className = "li" >
                应用平台 <
                ul className = "menu" >
                <
                a href = { znBaseUrl }
                target = "frameZn" > 智能调节阀管理平台 < /a> <
                a to = "/" > 室温采集分析平台 < span > & lt; 建设中 & gt; < /span></a >
                <
                a to = "/" > 智能供热iSCADA平台 < span > & lt; 敬请期待 & gt; < /span></a >
                <
                /ul> <
                /li> <
                li data - index = "3"
                className = "li" >
                服务工具 <
                ul className = "menu" >
                <
                Link to = {
                    {
                        pathname: "serviceCommunity",
                        search: "?key=1&keyChild=4"
                    }
                } > 供热管网水力计算分析软件 < /Link> <
                a href = { zzBaseUrl }
                target = "frameZz" > 枝状管网水力平衡计算软件 < /a> <
                a href = { bjBaseUrl }
                target = "frameBj" > 供热产品报价系统 < /a> <
                a to = "/" > 供热系统校核、 设计、 仿真软件 < span > & lt; 敬请期待 & gt; < /span></a >
                <
                a to = "/" > 热力站设备测评软件 < span > & lt; 敬请期待 & gt; < /span></a >
                <
                /ul> <
                /li> <
                li data - index = "4"
                className = "li " >
                解决方案 <
                ul className = "menu" >
                <
                Link to = "/solutionEnergyEfficiency" > 集中供热能效提升解决方案 < /Link> <
                Link to = "/serviceTeam" > 暖虎服务队 < /Link> <
                Link to = "/accountManagement" > 跨平台多业务账号管理 < /Link> <
                Link to = {
                    { pathname: "serviceCommunity", search: "?key=1&keyChild=2" } } > 物联网设备的热力数据托管服务 < /Link> <
                Link to = {
                    { pathname: "serviceCommunity", search: "?key=1&keyChild=2" } } > 企业级监管平台的热力数据托管服务 < /Link> <
                /ul> <
                /li> <
                Link to = "/help"
                data - index = "5"
                className = "li bz" > 帮助中心 < /Link> <
                /ul> {
                    this.props.userInfo.isLogIn == false ? ( < div className = "d_right" >
                            <
                            Link className = "li zc"
                            to = "/signUp" >
                            免费注册 <
                            /Link> <
                            Link className = "li dl"
                            to = "/signIn" >
                            登录 <
                            /Link> <
                            /div>) : ( <div className="d_right"> <
                            div className = "li dl"
                            onClick = { this.LogOut } >
                            退出 <
                            /div> <
                            div className = "li na" > { this.props.userInfo.UserName } < /div> <
                            /div>)
                        } <
                        /div> <
                        div className = "clear_both" > < /div> <
                        div className = "botm" >
                        <
                        img src = { ljnw }
                    alt = "" / >
                        <
                        /div> <
                        /div> <
                        div className = "j_f" >
                        <
                        div className = "j_f_t" >
                        <
                        div className = "j_f_t_img" > < /div> <
                        div className = "j_f_t_text" > 解决方案 < /div> <
                        /div> <
                        div className = "j_f_b" >
                        <
                        div className = "j_f_b_l" >
                        采用专家最新成果、 融合先进供热技术， 与您分享智慧供热实践成果。 <
                        /div> <
                        Link to = "/programmes"
                    className = "j_f_b_r" > 更多方案 < /Link> <
                        /div> <
                        /div> <
                        div className = "j_f_box" >
                        <
                        div className = "j_f_i" >
                        <
                        div className = "j_f_i_head_n" >
                        <
                        div className = "j_f_i_icon_box" >

                        <
                        /div> <
                        /div> <
                        div className = "j_f_i_head" >
                        <
                        div className = "j_f_i_icon_box" >

                        <
                        /div> <
                        /div> <
                        div className = "title" >
                        集中供热能效提升解决方案 <
                        /div> <
                        div className = "content" > “3133” 智能热网企业级产品平台 <
                        /div> <
                        Link className = "x_q"
                    to = "/solutionEnergyEfficiency" > 查看详情 < /Link> <
                        /div> <
                        div className = "j_f_i" >
                        <
                        div className = "j_f_i_head2_n" >
                        <
                        div className = "j_f_i_icon_box" >

                        <
                        /div> <
                        /div> <
                        div className = "j_f_i_head2" >
                        <
                        div className = "j_f_i_icon_box" >

                        <
                        /div> <
                        /div> <
                        div className = "title" >
                        物联网设备的热力数据托管服务 <
                        /div> <
                        div className = "content" >
                        提供智能供热整体解方案， 不止于产品和服务 <
                        /div> <
                        a href = "javascript:;"
                    className = "x_q" > 查看详情 < /a> <
                        /div> <
                        div className = "j_f_i" >
                        <
                        div className = "j_f_i_head3_n" >
                        <
                        div className = "j_f_i_icon_box" >

                        <
                        /div> <
                        /div> <
                        div className = "j_f_i_head3" >
                        <
                        div className = "j_f_i_icon_box" >

                        <
                        /div> <
                        /div> <
                        div className = "title" >
                        企业级监管平台的热力数据托管服务 <
                        /div> <
                        div className = "content" >
                        提供智能供热整体解方案， 不止于产品和服务 <
                        /div> <
                        a href = "javascript:;"
                    className = "x_q" > 查看详情 < /a> <
                        /div> <
                        div className = "j_f_i" >
                        <
                        div className = "j_f_i_head4_n" >
                        <
                        div className = "j_f_i_icon_box" >

                        <
                        /div> <
                        /div> <
                        div className = "j_f_i_head4" >
                        <
                        div className = "j_f_i_icon_box" >

                        <
                        /div> <
                        /div> <
                        div className = "title" >
                        暖虎服务队 <
                        /div> <
                        div className = "content" >
                        提供OTO模式的全面服务， 帮助用户获得更好的体验。 <
                        /div> <
                        Link to = "/serviceTeam"
                    className = "x_q" > 查看详情 < /Link> <
                        /div> <
                        /div> <
                        div className = "j_f" >
                        <
                        div className = "j_f_t" >
                        <
                        div className = "j_f_t_img" > < /div> <
                        div className = "j_f_t_text" > 服务工具 < /div> <
                        /div> <
                        div className = "j_f_b" >
                        <
                        div className = "j_f_b_l" >
                        为用户提供多种分析、 计算、 开发、 学习类供热领域专业工具。 <
                        /div> <
                        Link to = "/tools"
                    className = "j_f_b_r" > 更多工具 < /Link> <
                        /div> <
                        /div> <
                        div className = "f_j_box" >
                        <
                        div className = "f_j_i" >
                        <
                        Link to = "pipeNetwork"
                    className = "y" >
                        详情 / 应用 <
                        /Link> <
                        div className = "t" >
                        供热管网水力计算分析软件 <
                        /div> <
                        /div> <
                        div className = "f_j_i " >
                        <
                        div className = "y" >
                        详情 / 应用 <
                        /div> <
                        div className = "t" >
                        供热系统校核、 设计、 仿真软件 <
                        /div> <
                        /div> <
                        div className = "f_j_i" >
                        <
                        div className = "y" >
                        详情 / 应用 <
                        /div> <
                        div className = "t" >
                        枝状管网水力平衡计算软件 <
                        /div> <
                        /div> <
                        div className = "f_j_i" >
                        <
                        div className = "y" >
                        详情 / 应用 <
                        /div> <
                        div className = "t" >
                        热力站设备测评软件 <
                        /div> <
                        /div> <
                        /div> <
                        div className = "j_f" >
                        <
                        div className = "j_f_t" >
                        <
                        div className = "j_f_t_img" > < /div> <
                        div className = "j_f_t_text" > 应用平台 < /div> <
                        /div> <
                        div className = "j_f_b" >
                        <
                        div className = "j_f_b_l" >
                        多种基于云端的供热应用平台， 帮助用户提高供热的生产、 管理、 监管水平。 <
                        /div> <
                        Link to = "/platforms"
                    className = "j_f_b_r" > 更多平台 < /Link> <
                        /div> <
                        /div> <
                        div className = "y_y" >
                        <
                        div className = "swiper-container" >
                        <
                        div className = "swiper-wrapper" >
                        <
                        div className = "swiper-slide swiper-slide-1" >
                        <
                        div className = "swiper-slide-top" > < /div> <
                        div className = "swiper-slide-bot " >
                        <
                        div className = "" >
                        智能调节阀管理平台 <
                        /div> <
                        Link to = "/intelligentValve"
                    className = "swiper-slide-a" > 了解详情 < /Link> <
                        /div> <
                        /div> <
                        div className = "swiper-slide swiper-slide-2" >
                        <
                        div className = "swiper-slide-top" > < /div> <
                        div className = "swiper-slide-bot " >
                        <
                        div className = "" >
                        室温采集分析平台 <
                        /div> <
                        Link to = "/temperatureCollection"
                    className = "swiper-slide-a" > 了解详情 < /Link> <
                        /div> <
                        /div> <
                        div className = "swiper-slide swiper-slide-3" >
                        <
                        div className = "swiper-slide-top" > < /div> <
                        div className = "swiper-slide-bot" >
                        <
                        div className = "" >
                        智能供热iSCADA平台 <
                        /div> <
                        Link to = "/isCaDa"
                    className = "swiper-slide-a" > 了解详情 < /Link> <
                        /div> <
                        /div> <
                        div className = "swiper-slide swiper-slide-1" >
                        <
                        div className = "swiper-slide-top" > < /div> <
                        div className = "swiper-slide-bot " >
                        <
                        div className = "" >
                        智能调节阀管理平台 <
                        /div> <
                        Link to = "/intelligentValve"
                    className = "swiper-slide-a" > 了解详情 < /Link> <
                        /div> <
                        /div> <
                        div className = "swiper-slide swiper-slide-2" >
                        <
                        div className = "swiper-slide-top" > < /div> <
                        div className = "swiper-slide-bot " >
                        <
                        div className = "" >
                        室温采集分析平台 <
                        /div> <
                        Link to = "/temperatureCollection"
                    className = "swiper-slide-a" > 了解详情 < /Link> <
                        /div> <
                        /div> <
                        div className = "swiper-slide swiper-slide-3" >
                        <
                        div className = "swiper-slide-top" > < /div> <
                        div className = "swiper-slide-bot" >
                        <
                        div className = "" >
                        智能供热iSCADA平台 <
                        /div> <
                        Link to = "/iscada"
                    className = "swiper-slide-a" > 了解详情 < /Link> <
                        /div> <
                        /div>

                    <
                    /div> <
                    /div> <
                    div className = "left_hide" > < /div> <
                        div className = "right_hide" > < /div> <
                        div className = "left"
                    id = "left" > < /div> <
                        div className = "right"
                    id = "right" > < /div> <
                        /div> <
                        div className = "j_f" >
                        <
                        div className = "j_f_t" >
                        <
                        div className = "j_f_t_img" > < /div> <
                        div className = "j_f_t_text" > 服务社区 < /div> <
                        /div> <
                        div className = "j_f_b" >
                        为您提供一站式专业服务: 技术交流、 产品申购、 供热质量监察、 开发畅游...... <
                        /div> <
                        /div> <
                        div className = "s_q" >
                        <
                        div className = "s_t_t" >
                        <
                        div className = "title" > 社区资讯 < /div> <
                        Link to = "/serviceCommunity"
                    className = "s_q_btn" > 社区详情 < /Link> <
                        /div> <
                        div className = "s_t" >
                        <
                        ul >

                        {
                            this.state.item.map(function(item, index) {
                                if (index < 8) {
                                    return <Link className = "li"
                                    target = "_blank"
                                    to = {
                                        { pathname: '/informationDetails/' + item.ID } }
                                    key = { index } > { index + 1 } & nbsp; & nbsp; & nbsp; & nbsp; { item.MessageTitle } & nbsp; & nbsp; & nbsp; & nbsp; { utils.formateDate(item.ModifiedTime) } < /Link>
                                }

                            })
                        } <
                        /ul> <
                        /div> <
                        /div> <
                        div className = "h_z" >
                        <
                        h3 > 合作伙伴 < /h3> <
                        div className = "h_z_img" > < /div> <
                        /div> <
                        /div>
                );
            }
        }
        const mapStateToProps = state => {
            return {
                userInfo: state.userInfo
            }
        }
        const mapDispatchToProps = dispatch => {
            return {
                menuShowBool: function(obj) {
                    dispatch(switch_menuShowBool(obj))
                },
                menuInit: function(num) {
                    dispatch(switchIndex(num))
                },
                LogOutProps: function(obj) {
                    dispatch(switch_userInfo(obj))
                }
            }
        }
        export default connect(mapStateToProps, mapDispatchToProps)(Home)